<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>透传属性</h2>
    <!-- 如果在子组件标签上面添加了自定义的属性 -->
    <!-- 但是，在子组件里面没有用props进行接受 -->
    <!-- 那么这个自定义属性就会直接挂载到子组件的根元素上面 -->

    <!-- 一般会在子组件标签上面添加class或者style -->
    <!-- class和style就会直接加到子组件的根元素上面 -->

    <!-- 场景：使用别人写好的第三方组件的时候，传入对应的样式 -->
    <son abc="123" count="1" class="wrap"></son>
  </div>

  <script src="../vue3.js"></script>
  <script>

    const {createApp} = Vue;

    // 1. 必须要有一个根元素
    // 2. props不能去接受这个属性
    const Son = {
      props: ["count"],
      template: `
        <div class="son">
          <div>这是子组件</div>
        </div>
      `,
    }

    const app = createApp({
      components: {
        Son
      },
    });

    app.mount("#app");
  </script>
</body>
</html>